import React, {useState} from 'react';
import {Navigate, NavLink,Outlet,useOutlet} from "react-router-dom";

export default function Home() {
    const [sum, setSum] = useState(1)
    // 输出已挂载的嵌套组件对象
    console.log(useOutlet())
    return (
        <div>
            <div>我是Home</div>
            {/*Navigate  增加 replace={true} 则不留记录*/}
            {sum === 2 ? <Navigate to='/About'/> : <h4>当前sum值是：{sum}</h4>}
            <button onClick={() => setSum(2)}>点我将sum变为2</button>
            <div>
                <ul className="nav nav-tabs">
                    <li>
                        <NavLink className="list-group-item" replace to='News'>News</NavLink>
                    </li>
                    <li>
                        <NavLink className={"list-group-item"} to='Message'>Message</NavLink>
                    </li>
                </ul>
                <div>
                    <Outlet/>
                </div>
            </div>
        </div>
    )
}